<template>
    <!-- 右侧侧边栏 -->
    <div id="left_bar" ref="leftBar">
        <img src="https://bokey.oss-cn-shenzhen.aliyuncs.com/img/staticImage/bokeydoki.png" alt="bokeydoki">
        <ul id="list">
            <li @click="toHome()"><span></span>
                <p v-show="textShow">博客</p>
            </li>
            <li @click="toEssay()"><span></span>
                <p v-show="textShow">随笔</p>
            </li>
            <li @click="toPhoto()"><span></span>
                <p v-show="textShow">图库</p>
            </li>
            <li @click="toResource()"><span></span>
                <p v-show="textShow">分享</p>
            </li>
            <li @click="toAnnouncement()"><span></span>
                <p v-show="textShow">公告</p>
            </li>
            <li @click="toAboutWeb()"><span></span>
                <p v-show="textShow">关于</p>
            </li>
        </ul>
        <br>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 控制文本显示
            textShow: true
        }
    },
    methods: {
        toHome() {
            this.$router.push({
                path: "/"
            })
        },
        toAboutWeb() {
            this.$router.push({
                path: "/aboutWeb"
            })
        },
        toResource() {
            this.$router.push({
                path: "/resource"
            })
        },
        toAnnouncement() {
            this.$router.push({
                path: '/announcement'
            })
        },
        toEssay() {
            this.$router.push({
                path: '/essay'
            })
        },
        toPhoto() {
            this.$router.push({
                path: '/photo'
            })
        },
        // leftBar变小事件，提供回调给App组件
        barSmall() {
            this.$refs.leftBar.style.width = '100px'
            this.textShow = false
        },
        // leftBar还原事件，提供回调给App
        barBack() {
            this.$refs.leftBar.style.width = ''
            this.textShow = true
        }
    },
    mounted() {
        // 获取当前屏幕宽度，看是否需要leftBar变小
        if(document.body.clientWidth < 1450) {
            this.barSmall()
        }
        // 获取当前屏幕高度，并设置leftBar的最小高度为一个屏幕高度 (减去30是因为window.innerHeight大于一个屏幕高度，目测感觉减30刚刚好)
        this.$refs.leftBar.style.minHeight = window.innerHeight + 'px'
        // 绑定leftBar变小/还原事件总线
        this.$bus.$on('leftBarSmall', this.barSmall)
        this.$bus.$on('leftBarBack', this.barBack)
    },
    beforeDestroy() {
        // 销毁leftBar变小/还原事件总线
        this.$bus.$off('leftBarSmall')
        this.$bus.$off('leftBarBack')
    }
}
</script>

<style lang="scss" scoped>
#left_bar {
    display: inline-block;
    background-color: $color-bar;
    padding: 30px 0 0 30px;
    overflow: hidden;
}
img {
    width: 90%;
}

#list {
    margin: 30px 0;
}

span {
    margin: 0 30px;
    font-weight: $font-weight-large;
    text-align: center;
    height: 100%;
    font-size: $font-size-medium;
    overflow: hidden;
}

li {
    height: 80px;
    line-height: 80px;
    font-size: $font-size-medium;
    font-weight: $font-weight-medium;
    cursor: pointer;
    transition: all .3s;
    position: relative;
}

li::before {
    content: '';
    width: 100%;
    height: 0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    border-left: 5px solid #FA5566;
    transition: .5s ease;
}

li:hover::before {
    height: 100%;
}

li:hover {
    color: $color-main-text;
}

p {
    display: inline-block;
    font-size: $font-size-medium;
    font-weight: $font-weight-medium;
}</style>